<template>
  <div class="container">
    <div class="area">
      <!--
      1.
      2. rules 配置“标星”的校验规则： rules.prop： 表单模式下的合法性校验标记，ref 通过该属性选择指定的表单
      -->
      <!-- model：表单检验时必填。 因为在表单检验时，校验器获取的值为：model.prop，该值需要和v-model绑定的值一样，
       否则校验规则一直提示该属性不能为空。 ref：标识需要校验的组件 ，rules 校验使用的规则   -->

      <!--
      【表单组件，提供了一个可扩展的数据校验逻辑】
      （慎重思考）
      1. model 表单对象
      2. rules 表单校验规则
      3. ref 表单快速选择对象
      4. v-model 双向绑定。（是否会和model冲突？？ 经验证：v-model 是必须存在的，否则输入不了数据 ）

      当无法是用v-model进行数据绑定的时候，可以直接修改model绑定的数据对象里面的值，同校验规则（rule）的prop属性保持一致即可完成数据校验

      双向绑定的合规性校验是不是校验 model属性中的同属性的值呢？？ 是的！
      -->

      <el-form :model="form" ref="checkForm" :rules="rules" label-width="80px">
        <el-form-item label="商品名称" prop="name" label-width="120px">
          <el-input v-model="form.name" placeholder="商品名称"/>
        </el-form-item>
        <el-form-item label="排序" prop="sort" label-width="120px">
          <el-input v-model="form.sort" placeholder="商品排序"/>
        </el-form-item>
        <el-form-item label="缩略图" prop="url" label-width="120px">
          <el-upload
            :action="uploadServer"
            :file-list="fileList"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="促销价格" prop="nowPrice" label-width="120px">
          <el-input v-model="form.nowPrice" placeholder="促销价格"/>
        </el-form-item>
        <el-form-item label="商品原价" prop="price" label-width="120px">
          <el-input v-model="form.price" placeholder="商品原价"/>
        </el-form-item>
        <el-form-item label="已售数量" prop="mai" label-width="120px">
          <el-input v-model="form.mai" placeholder="已售数量"/>
        </el-form-item>
        <el-form-item label="商品分类" prop="type" label-width="120px">
          <el-select v-model="form.type" placeholder="商品主分类" clearable>
            <el-option
              v-for="dict in dict.type.mini_good_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品二级分类" prop="typeTwo" label-width="120px">
          <el-select v-model="form.typeTwo" placeholder="商品二级分类" clearable>
            <el-option
              v-for="dict in dict.type.mini_good_stype"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品详情" prop="info" label-width="120px">
          <div style="border: 1px solid #ccc;height: 600px">
            <!--    工具栏组件-->
            <Toolbar
              style="border-bottom: 1px solid #cccccc;height: 50px;"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <!--编辑器区域-->
            <Editor
              style="height: 550px;  overflow-y: hidden;"
              v-model="html"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </div>
  </div>
</template>
<script>

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

/* 工具栏配置项 */
import { DomEditor } from '@wangeditor/editor'

/* 编辑器配置项 */
import { IEditorConfig } from '@wangeditor/editor'
import { listMiniGood, getMiniGood, delMiniGood, addMiniGood, updateMiniGood, exportMiniGood } from '@/api/mini/good'
import config from '@/utils/config'

export default {
  name: 'MyEditor',
  dicts: ['mini_good_type', 'mini_good_stype'],
  components: { Editor, Toolbar },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      uploadServer: config.uplaodServer,
      imgPrefx: config.imgPrefx,
      fileList: [],
      mode: 'default', /* 工具栏模式  simple*/
      editor: null, /* 编辑器示例 */
      html: '',
      toolbarConfig: {
        //toolbarKeys: [ "blockquote"], /* 工具栏上只显示的菜单 */
        excludeKeys: ['uploadImage', 'uploadVideo'] /* 工具栏上排除的菜单(只需要考虑具体的key,无需关注对应的结构) */
      },
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          'uploadImage': {
            server: '/api/upload'
          }
        }
      },
      form: {
        id: '',
        name: '',
        price: '',
        nowPrice: '',
        type: '',
        typeTwo: '',
        info: '',
        url: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        sort:'',
        pics: [],
        mai:''
      },
      rules: {
        name: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        nowPrice: [
          { required: true, message: '促销价格不能为空', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '原价不能为空', trigger: 'blur' }
        ],
        mai: [
          { required: true, message: '商品已售数量不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '商品分类不能为空', trigger: 'blur' }
        ],
        typeTwo: [
          { required: true, message: '二级分类不能为空', trigger: 'blur' }
        ],
        info: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '缩略图不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '商品排序不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 获取路由传值
    var _this = this
    _this.paramsId = _this.$route.params.keyId
    if (_this.paramsId) {
      getMiniGood(_this.paramsId).then(function(res) {
        if (200 === res.code) {
          const data = res.data
          _this.form.id = data.id
          _this.form.name = data.name
          _this.form.price = data.price
          _this.form.nowPrice = data.nowPrice
          _this.form.type = data.type
          _this.form.typeTwo = data.typeTwo
          _this.form.sort = data.sort
          _this.form.mai = data.mai
          // 给每一个图片加前缀
          for (var index in data.pics) {
            // 1. 上传使用
            var src = data.pics[index];
            let obj1 = new Object()
            obj1['url'] = src.url
            obj1['uid'] = src.uid
            _this.form.pics.push(obj1)
            // 2. 页面回显使用，需要全路径
            let obj2 = new Object()
            obj2['url'] =_this.imgPrefx +  src.url
            _this.fileList.push(obj2)
          }
          if(_this.fileList.length>0){
            _this.form.url = 'true'
          }
          // 设置编辑器的html片段内容
          _this.editor.setHtml(data.info)
        }
      })
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      /* 编辑器属性 */
      /* console.log(this.editor.getConfig()); */
      /* 获取工具栏 */
      const toolbar = DomEditor.getToolbar(this.editor)
      /* 获取工具栏配置 */
      const curToolbarConfig = toolbar.getConfig()
      console.log(curToolbarConfig.toolbarKeys) // 排序和分组

      //console.log(this.editor.getAllMenuKeys())
      // 初始化 MENU_CONF 属性

      // this.html = '<p>Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  methods: {
    /**
     * [照片墙移除事件]
     * @param file
     * @param fileList
     */
    handleRemove(file, fileList) {
      console.info("1111111",this.form.pics)
      console.log("2222", file.url)
      var tmpArray = new Array();
      for(var i=0;i<this.form.pics.length;i++){
        var ttt = this.imgPrefx + this.form.pics[i].url;
        if (file.url != ttt){
          tmpArray.push(this.form.pics[i]);
        }
      }
      this.form.pics = tmpArray;
    },
    /**
     * [照片墙预览事件]
     * @param file
     * @param fileList
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
     * [照片墙上传成功事件]
     * @param file
     * @param fileList
     */
    handleSuccess(resp, file, fileList) {
      console.log('22222', file)
      console.log('33333', resp)
      let obj = new Object()
      obj['name'] = file.name
      obj['url'] = resp.msg
      obj['uid'] = file.uid
      this.form.pics.push(obj) // 上传使用
      this.form.url = 'true'
      //this.fileList.push(obj);  // 表单校验使用
    },
    handlePreview(url) {
      // 使用el-image的预览功能
      this.$emit('preview', url)
    },
    /**
     * 编辑器创建完毕时的回调函数。
     * @param editor
     */
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
    },
    /**
     * 编辑器内容、选区变化时的回调函数。
     * @param editor
     */
    onChange(editor) {
      console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
      //todo 未生效？？ 到底是为什么呢？？
      console.info('11111111111111', editor.getHtml())
      this.form.info = editor.getHtml()
    },
    getEditorText() {  // 读取编辑器的内容（文本）
      const editor = this.editor
      if (editor == null) return
      console.log(editor.getText()) // 执行 editor API
    },
    printEditorHtml() {  // 读取编辑器的内容（html片段）
      const editor = this.editor
      if (editor == null) return
      console.log(editor.getHtml()) // 执行 editor API
    },
    submitForm() {
      var _this = this
      _this.form.info = _this.editor.getHtml()
      // 1. 校验表单的必填项都完成填写
      _this.$refs['checkForm'].validate(valid => {
        if (valid) {
          console.log("1212121",this.form)
          addMiniGood(this.form).then(response => {
            console.log(response)
            if (200 === response.code) {
              _this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              setTimeout(function() {
                _this.$router.push('/mini/good')
              }, 200)
            }
          })
        }
      })
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.container {
  width: 100%;
  /*border: solid 1px red;*/
  display: flex;
  justify-content: center;
}

.area {
  margin-top: 10px;
  width: 90%;
  /* border: solid 1px blue;*/
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>


